<template>
  <a-modal
    v-model:visible="visible"
    title="导入实名认证"
    @ok="handleOk"
    ok-text="确定"
    cancel-text="取消"
  >
    <a-form
      ref="formRef"
      :model="modelRef"
      :rules="rulesRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="实名类型" name="type">
        <a-select v-model:value="modelRef.type">
          <a-select-option
            v-for="(item, key) in typeList"
            :key="key"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属地区" name="region">
        <a-cascader
          v-model:value="modelRef.region"
          :field-names="{ label: 'name', value: 'id', children: 'children' }"
          :options="regionList"
          placeholder="请选择地区"
        />
      </a-form-item>
      <a-form-item label="详细地址" name="detail">
        <a-input v-model:value="modelRef.detail" />
      </a-form-item>
      <a-form-item label="上传表格" name="table">
        <a-upload
          v-model:fileList="modelRef.table"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          name="file"
          :multiple="false"
          :showUploadList="true"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <a-button>
            <UploadOutlined />
            选择表格
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { toRefs, reactive, nextTick, defineComponent } from "vue";
import { UploadOutlined } from "@ant-design/icons-vue";
import { notice, deepCopy, isEmptyObject } from "@/config";
import { getLocalExcel } from "@/config/utils/excel";
import { plus } from "@/api/user/Realname";

export default defineComponent({
  components: {
    UploadOutlined,
  },
  setup(props, { emit }) {
    let state = reactive({
      visible: false,
      formRef: "",
      item: {},
      regionList: [],
      typeList: [],
    });
    let modelRef = reactive({
      type: undefined,
      region: [],
      detail: "",
      sort: 100,
      table: [],
      info: [],
    });
    let rulesRef = reactive({
      type: [
        {
          required: true,
          message: "请选择身份类型",
        },
      ],
      region: [
        {
          required: true,
          message: "请选择地址",
        },
      ],
      table: [
        {
          required: true,
          message: "请选择要上传的表格",
        },
      ],
    });

    const resetForm = () => {
      nextTick(() => {
        state.formRef.resetFields();
      });
    };
    // 显示对话框
    const show = (regionList, typeList) => {
      state.regionList = regionList;
      state.typeList = typeList;
      state.visible = state.visible ? false : true;
      resetForm();
    };

    const handleRemove = () => {
      modelRef.table.length = 0;
    };

    const beforeUpload = (file) => {
      handleRemove();
      modelRef.table.push(file);
      // 读取Excel
      const headers = {
        name: "姓名",
        mobile: "手机号",
        duties_name: "职务名称",
        id_number: "身份证号",
      };

      getLocalExcel(file,headers).then((res) => {
        modelRef.info = res;
      });
      return false;
    };

    // 确定提交
    const handleOk = () => {
      state.formRef.validate().then(() => {
        const newFrom = deepCopy(modelRef);
        delete newFrom.table;
        if (newFrom.info.length < 1) {
          notice("error", "请上传模板标准表格");
          return false;
        }
        if (isEmptyObject(newFrom.info[0])) {
          notice("error", "请上传模板标准表格 -1");
          return false;
        }

        plus(newFrom).then((res) => {
          emit("okCallback", res);
          notice(res.status == 200 ? "success" : "error", res.message);
          state.visible = false;
        });
      });
    };

    return {
      show,
      handleOk,
      ...toRefs(state),
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      modelRef,
      rulesRef,
      handleRemove,
      beforeUpload,
    };
  },
});
</script>
